<template>
  <div class="main-todo">
    <input
      class="add-todo"
      type="text"
      placeholder="What to do↵"
      autofocus
      v-model="content"
      @keyup.enter="handleAdd"
    />
    <!-- 父组件->子组件传参
      1. 在父组件的模板中, 绑定一个自定义的属性
      2. 在子组件的对象中, 通过props接收
     -->
    <todo-item
      v-for="item in filterData"
      :key="item.id"
      :todo="item"
      @toggle="handleToggle"
      @edit="handleEdit"
      @del="handleDel"
    ></todo-item>
    <todo-info
      :total="total"
      @toggle="handleChange"
      @del="handleDelCompleted"
    ></todo-info>
  </div>
</template>

<script>
// 导入子组件
import TodoItem from './coms/TodoItem'
import TodoInfo from './coms/TodoInfo'

export default {
  name: 'MainTodo',
  components: {
    TodoItem,
    TodoInfo,
  },
  data() {
    return {
      todos: [],
      content: '',
      state: 'all',
    }
  },
  computed: {
    total() {
      // 根据todos数组, 计算所有`completed==0`的个数
      // filter: 过滤出满足条件的元素, 形成一个新数组
      return this.todos.filter((item) => item.completed == 0).length
    },
    filterData() {
      switch (this.state) {
        case 'all':
          return this.todos
        case 'active':
          return this.todos.filter((item) => item.completed == 0)
        case 'completed':
          return this.todos.filter((item) => item.completed == 1)
      }
    },
  },
  created() {
    // 在MainTodo组件被创建时, 自动执行
    console.log('MainTodo被创建了...')
    this.getTodos()
  },
  methods: {
    getTodos() {
      // 发送ajax请求
      this.$http.get('http://localhost:3000/todos').then((res) => {
        console.log(res)
        // 解构res
        const { data } = res
        if (data.code == 0) {
          this.todos = data.result
        }
      })
    },
    handleAdd() {
      // console.log('@@@', this.content)
      // 判断内容不能为空
      if (this.content.trim() == '') {
        alert('请输入待办内容')
        return
      }
      // 发送post请求
      this.$http
        .post('http://localhost:3000/todos', { content: this.content })
        .then((res) => {
          const { code, message, result } = res.data

          if (code == 0) {
            // 重新获取数据
            this.getTodos()
            // 清空输入框
            this.content = ''
          }
        })
    },
    handleToggle(id) {
      // console.log(id)
      // 1. 根据id查找对应的todos数组中的对象
      const data = this.todos.find((item) => item.id == id)
      // console.log(data)

      // 2. 更新该对象的completed的值.
      data.completed == 0 ? (data.completed = 1) : (data.completed = 0)

      // 调用put接口,
      // 发送ajax请求
      this.$http.put(`http://localhost:3000/todos/${id}`, data).then((res) => {
        const { code, message, result } = res.data

        if (code == 0) {
          // 数据更新成功, 重新获取数据
          this.getTodos()
        }
      })
    },
    handleEdit(todo) {
      console.log(todo)

      // 发送put请求
      this.$http
        .put('http://localhost:3000/todos/' + todo.id, todo)
        .then((res) => {
          const { code, message, result } = res.data
          if (code == 0) {
            this.getTodos()
          }
        })
    },
    handleDel(id) {
      // 调用接口 DELETE /todos/:id
      // 发送请求
      this.$http.delete(`http://localhost:3000/todos/${id}`).then((res) => {
        const { code, message, result } = res.data

        if (code == 0) {
          this.getTodos()
        }
      })
    },
    handleChange(state) {
      this.state = state
    },
    handleDelCompleted() {
      // 调用接口(DELETE /todos?completed=1)
      this.$http
        .delete('http://localhost:3000/todos?completed=1')
        .then((res) => {
          const { code } = res.data
          if (code == 0) {
            this.getTodos()
          }
        })
    },
  },
}
</script>

<style lang="stylus">
// 引入mixin文件
@import '~styles/mixins.styl'

.main-todo
  width: 600px
  min-width: 600px
  margin: 0 auto
  background-color: #fff
  box-shadow: 0 0 5px #666
  .add-todo
    padding: 16px 16px 16px 36px
    font-size: 24px
    font-family: inherit
    font-weight: 200
    clearDefault()
</style>